<template>
  <section class="content">
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">筛选查询</h3>
      </div>
      <div class="form-horizontal">
        <div class="box-body p-tb-20">
          <div class="form-group">
            <div class="col-sm-10 p-l-0">
              <div class="">
                <div class="col-sm-4 flex">
                  <label class="control-label bg-gray min-width">ebay sku：</label>
                  <div class="inline-block">
                    <input type="text" class="form-control" placeholder="请输入ebay sku" v-model="selectGoodsEn">
                  </div>
                </div>
                <div class="col-sm-4 flex">
                  <label class="bg-gray control-label min-width">英文名称：</label>
                  <div class="inline-block">
                    <input type="text" class="form-control" placeholder="请输入英文名称" v-model="productName">
                  </div>
                </div>
                <div class="col-sm-4 flex">
                  <button class="btn btn-success m-r-10" @click="searchProduc">搜&nbsp;索</button>
                  <button class="btn btn-danger" @click="resetProduct">重&nbsp;置</button>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="">
              <div class="col-sm-12 flex">
                <label class="control-label bg-gray min-width">商品状态：</label>
                <div class="inline-block">
                  <button v-for="(btnSeekItem,index) in btnSeek" class="btn btn-default m-r-10" :class="{'btn-info' : index == active}" @click="seekPublishStatus(index,btnSeekItem.status)">{{btnSeekItem.name}}</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /.box-body -->

        <!-- /.box-footer -->
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-info">
          <div class="box-header with-border">
            <h3 class="box-title">数据列表</h3>
            <!--<label for="checkbox">-->
            <!--<input id="checkbox" type="checkbox" class="flat-red" name="hazardous"> 只查看低于库存预警-->
            <!--</label>-->
            <!--<button type="button" class="btn btn-success pull-right m-r-10" >导入/导出</button>-->
            <!--<button type="button" class="btn btn-info pull-right m-r-10" data-toggle="modal" data-target="#modal-default3">批量补货</button>-->
            <button type="button" class="btn btn-primary pull-right m-r-10" data-toggle="modal"
                    data-target="#modal-default" v-if="checkModal.length > 0 && $_has('sys:ebayGoods:batchAddItemlist')" @click="allPublish">批量发布
            </button>
            <button type="button" class="btn btn-primary pull-right m-r-10" v-if="$_has('sys:ebayGoods:batchAddItemlist') && checkModal.length == 0" @click="allPublish">批量发布
          </button>
            <router-link to="/v1/ebay/draft/edit/getData" class="btn btn-primary pull-right m-r-10" v-if="$_has('sys:ebayGoods:add')">添加草稿</router-link>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <table id="example3" class="table table-bordered table-striped dataTable table-hover">
              <div class="overlay" v-if="show">
                <i class="fa fa-refresh fa-spin"></i>
              </div>
              <thead>
              <tr>
                <th>
                  <label>
                    <input type="checkbox" class="flat-red" v-model="allCheckBox" @change="allCheckBoxFn">
                  </label>
                </th>
                <th style="width: 10%">商品图片</th>
                <th style="width: 35%;">ebay sku</th>
                <th>店铺</th>
                <th>站点</th>
                <th style="width: 10%">库存总量/平台库存</th>
                <!--<th>尺寸</th>-->
                <!--<th>销量（7/30）</th>-->
                <th style="width: 10%">状态</th>
                <th style="width: 13%">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-if="productList.length == 0">
                <td colspan="8">没有数据</td>
              </tr>
              <tr v-else v-for="productListItem in productList">
                <td>
                  <label>
                    <input type="checkbox" class="flat-red" :value="productListItem.draftId" v-model="checkModal">
                  </label>
                </td>
                <td>
                  <div class="imgW">
                    <img v-if="productListItem.goodsPic" :src="productListItem.goodsPic" alt="">
                    <img v-else src="@/assets/noPic.png" alt="">
                  </div>
                </td>
                <td style="padding-left: 20px;" class="text-left">

                  <label class="m-l-15">
                    <p>
                      <label>商品编码：</label>
                      <span>{{productListItem.ebaySku}}</span>
                    </p>
                    <p>
                      <label>英文名称：</label>
                      <span>{{productListItem.goodsEn}}</span>
                    </p>
                    <!--<p>-->
                      <!--<label>品牌名称：</label>-->
                      <!--<span>{{productListItem.brandName}}</span>-->
                    <!--</p>-->
                  </label>
                </td>
                <td>{{productListItem.shopName ? productListItem.shopName : '-'}}</td>
                <td>{{productListItem.siteCn ? productListItem.siteCn : '-'}}</td>
                <td>
                  {{productListItem.stockQty ? productListItem.stockQty : 0}}/{{productListItem.ebayStockQty ?
                  productListItem.ebayStockQty : 0}}
                </td>

                <td class="text-green">
                  <span>{{productListItem.status == 1 ? "已刊登" : "待刊登"}}</span>
                </td>
                <td>
                  <span>
                    <a class="text-green m-lr-10" @click="examineEbay(productListItem.draftId,0)" v-if="$_has('sys:ebayGoods:view')">查看</a>
                  </span>
                  <span>
                    <a @click="examineEbay(productListItem.draftId,1)" v-if="productListItem.status == 0 && $_has('sys:ebayGoods:edit')" class="text-green m-lr-10">编辑</a>
                  </span>
                  <span>
                    <a class="text-green m-lr-10" v-if="productListItem.status == 0 && $_has('sys:ebayGoods:addItemlist')" @click="getbatchAddFn(productListItem.draftId)" data-toggle="modal" data-target="#modal-default">刊登</a>
                  </span>
                  <!--<a href="javascript:;" class="text-green m-lr-10" data-toggle="modal" data-target="#modal-default">库存调整</a>-->
                  <!--<a v-if="productListItem.status == 0" class="text-green m-lr-10">删除</a>-->
                  <!--<a v-if="productListItem.status == 1" class="text-green m-lr-10">补货</a>-->
                </td>
              </tr>
              </tbody>
            </table>
            <div class="clearfix" v-if="!productList.length == 0">
              <div class="m-t-15 pull-right">
                <pagination :total="pages.total" :current-page='pages.current' :display="pages.display"
                            @pagechange="pagechange"></pagination>
              </div>
            </div>
          </div>
          <!-- /.box-body -->
        </div>
        <!-- /.box -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->


    <div class="modal fade" id="modal-default">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">发布确认</h4>
          </div>
          <div class="modal-body">
            <div class="form-horizontal max_height">
              <div class="box-body">
                <table id="example1" class="table table-bordered">
                  <tbody>
                  <template v-for="batchAddItem in batchAdd">
                    <tr>
                      <td rowspan="2" class="confirm-the-release bg-info">
                        <img v-if="batchAddItem.goodsPic" :src="batchAddItem.goodsPic" alt="">
                        <img v-else src="@/assets/noPic.png" alt="">
                        <label class="m-l-15 p-l-20" style="width: 75%">
                          <p  class="textOverhide">
                            <label>sku：</label>
                            <span>{{batchAddItem.sku}}</span>
                          </p>
                          <p class="textOverhide">
                            <label>商品名称：</label>
                            <span>{{batchAddItem.goodsCn}}</span>
                          </p>
                        </label>
                      </td>
                      <td>当前库存</td>
                      <td>{{batchAddItem.stockQty}}</td>
                    </tr>
                    <tr>
                      <td>发布数量</td>
                      <td>{{batchAddItem.quantity}}</td>
                    </tr>
                  </template>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" v-if="$_has('sys:ebayGoods:batchAddItemSave')" @click="savePublish">确认发布</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>

    <div class="modal fade" id="modal-default3">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">补货</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal max_height">
              <div class="box-body">
                <table id="example4" class="table table-bordered">
                  <tbody>
                  <template v-for="table in tables">
                    <tr>
                      <td rowspan="3" class="confirm-the-release bg-info">
                        <img src="@/assets/dist/img/user2-160x160.jpg" alt="">
                        <label class="m-l-15">
                          <p>
                            <label>sku：</label>
                            <span>20202029191</span>
                          </p>
                          <p>
                            <label>商品名称：</label>
                            <span>iPhoneX 64G 黑色</span>
                          </p>
                        </label>
                      </td>
                      <td>当前库存</td>
                      <td>20</td>
                    </tr>
                    <tr>
                      <td>发布数量</td>
                      <td>5</td>
                    </tr>
                    <tr>
                      <td>补货数量</td>
                      <td style="width: 150px">
                        <input type="text" class="form-control" placeholder="请输入补货数量">
                      </td>
                    </tr>
                  </template>
                  </tbody>
                </table>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存</button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <transition name="fade">
      <div v-if="errorShow" class="gritter-notice-wrapper " :class="{'success-notice-wrapper':errorClass}">
        <div id="gritter-item-4" class="gritter-item-wrapper gritter-error" style="" role="alert">
          <div class="gritter-item"><a class="gritter-close" tabindex="1" @click="closeError"><i
            class="fa fa-close"></i></a>
            <div class="gritter-without-image"><span class="gritter-title">{{errorTitle}}</span>
              <p>{{errorMsg}}</p></div>
          </div>
        </div>
      </div>
    </transition>

    <div class="loading" v-if="dialogFormVisible">
      <span>
        <!--<i class="el-icon-loading"></i>-->
        <img src="@/assets/loading.gif" alt="">
      <p>
        刊登中...
      </p>
      </span>
    </div>

    <div class="treeSelect" v-if="isShowSelect" @click.self.prevent="isShowSelect = false"></div>
  </section>
</template>
<script>
  import Draft from '../../../js/publish/EBayPublished/Draft'

  export default Draft
</script>

<style scoped>
  .textOverhide{
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis
  }
  .loading{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.3);
    z-index: 99999;
  }
  .loading span{
    position: fixed;
    display: block;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 100000;
    font-size: 55px;
    color: #333;
    text-align: center;
  }
  .loading span p{
    font-size: 24px;
    color: #333;
  }
  .objectTree {
    position: absolute!important;
    overflow: auto;
    z-index: 100;
    width: 100%;
    height: 300px;
    border: 1px solid #cccdce;
    border-top: none;
  }
  .linehe > input{
    line-height: 34px!important;
    height: 36px!important;
  }
  .el-input__inner{
    line-height: 34px!important;
    height: 36px!important;
  }
  .el-date-editor.el-input{
    width: 100%!important;
  }
  .imgW{
    width: 120px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content:center;
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }
  .imgW img{
    height: 100%;
  }
  .treeSelect{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right:0;
    z-index: 99;
    background: rgba(255,255,255,0);
  }
</style>
